Preload & Prefetch

Dùng resource hint để kiểm soát thời điểm và cách trình duyệt fetch tài nguyên.

⚠️ Demo này cần resource server local. Chạy cd "8. Preload Prefetch/resource-server" && npm install && node server.js rồi reload.

Preload

rel="preload" — fetch tài nguyên ngay lập tức, cần thiết cho trang hiện tại.

  • Fetch độ ưu tiên cao
  • Không chặn parser
  • Tốt nhất cho asset quan trọng: font, hero image, script chính

Prefetch

rel="prefetch" — fetch khi nhàn rỗi, có thể cần cho trang sau.

  • Fetch độ ưu tiên thấp
  • Cache cho điều hướng trong tương lai
  • Tốt nhất cho tài nguyên trang kế tiếp

Cách Kiểm Tra

  1. Khởi động resource server (node server.js)
  2. Mở DevTools → tab Network, xoá log
  3. Reload trang này
  4. Quan sát: Image 1 tải với độ ưu tiên Cao (preload)
  5. Image 2 tải với độ ưu tiên Thấp (prefetch)
  6. Click "Đổi Ảnh" để dùng ảnh đã prefetch ngay lập tức

Demo Ảnh

Resource Hint Khác